<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				<view class="custom-title">碳核算模型</view>
			</block>
		</cu-custom>
		<view class="padding-32">
			<view class="model-content" v-for="(item,index) in 3" :key="index"
			:style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/mxBg.png)'}]">
				<view class="flex align-center justify-between">
					<view class="title">碳排放核算模型1</view>
					<view class="num">数量：8</view>
				</view>
				<view class="padding-top-24 flex align-start justify-start">
					<view>
						<image src="https://txr001.zthj.net/static/img/nyhySm.png" class="nyhy-img"></image>
					</view>
					<view class="padding-left-sm" style="width: 100%;">
						<view class="text-666 text-sm">模型提供：能源企业</view>
						<view class="padding-top-14 flex" >
							<view class="flex-sub bz-title">
								<view class="padding-left-sm">3</view>
								<view>深度</view>
							</view>
							<view class="flex-sub bz-title">
								<view class="padding-left-sm">1</view>
								<view>范围</view>
							</view>
							<view class="flex-sub bz-title">
								<view class="padding-left-xs"><text class="text-img-center">国标</text>
								<image src="https://txr001.zthj.net/static/img/question.png" class="img-22 margin-left-8"></image>
								</view>
								<view>核算标准</view>
							</view>
						</view>
						<view class="padding-top-32 flex align-center justify-start">
							<button class="cu-btn sy-btn">立即使用</button>
							<button class="cu-btn zs-btn" @click="modalName='Image'">赠送</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog text-left">
				<view class="zs-content">
					<view class="flex align-center justify-between">
						<view class="title">选择邀请对象</view>
						<view class="text-666 text-df">可选人数：3</view>
					</view>
					<view class="flex align-center justify-start padding-top-32" 
					v-for="(item,index) in List" :key="index" @click="checkTarget(item)">
						<view>
							<image :src="item.check?'https://txr001.zthj.net/static/img/cCheck.png':'https://txr001.zthj.net/static/img/cUncheck.png'" class="img-32"></image>
						</view>
						<view class="padding-left-16">
							<image v-if="item.type=='1'" src="https://txr001.zthj.net/static/img/cQyhead.png" class="img-52"></image>
							<image v-if="item.type=='2'" src="https://txr001.zthj.net/static/img/avatar.png" class="img-52"></image>
						    <text class="padding-left-8 text-3333 text-sm text-img-center">
								{{item.name}}
							</text>
						</view>
					</view>
				</view>
				<view class="zs-bottom-content">
					<button class="cu-btn cancel-btn" @click="hideModal">取消</button>
					<button class="cu-btn sure-btn">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName:"",
				List:[
					{type:'1',check:false,name:'某某某某某某环境服务集团有限公司'},
					{type:'2',check:false,name:'某某某'},
					{type:'1',check:false,name:'某某某某某某环境服务集团有限公司'},
					{type:'2',check:false,name:'某某某'},
					{type:'1',check:false,name:'某某某某某某环境服务集团有限公司'},
					{type:'2',check:false,name:'某某某'},
				]
			}
		},
		onLoad() {},
		methods: {
			hideModal(){
				this.modalName=""
			},
			checkTarget(item){
				item.check=!item.check
			},  
		}
	}
</script>

<style>
	page{background: linear-gradient(180deg, rgba(244,244,244,0) 10%, #F4F4F4 19%);}
</style>
<style lang="less" scoped>
	.model-content{
		background-size: 100% 100%;
		height: 332rpx;
		width: 100%;
		padding: 32rpx;
		margin-bottom: 32rpx;
		.title{
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
		}
		.num{
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
		}
		.nyhy-img{
			width: 140rpx;
			height: 184rpx;
		}
		.bz-title{
			font-size: 24rpx;
			font-weight: 400;
			color: #808080;
		}
		.sy-btn{
			width: 200rpx;
			height: 52rpx;
			background: #5397F4;
			border-radius: 80rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
		.zs-btn{
			width: 200rpx;
			height: 52rpx;
			background: #00D282;
			border-radius: 80rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 32rpx;
		}
	}
	.zs-content{
		padding: 48rpx;
		.title{
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}
	}
	.cu-dialog {
		height: 840rpx;
		background: #FFFFFF;
		border-radius: 48rpx;
	}
	.zs-bottom-content{
		padding: 48rpx 32rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.cancel-btn{
			width: 296rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 39rpx;
			border: 2rpx solid #999999;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}
		.sure-btn{
			width: 296rpx;
			height: 80rpx;
			background: #4690F7;
			border-radius: 39rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>